<template>
  <view class="shoppingBox">
    <!-- <custom-navbar :immersive="true" title="更换自提点"> </custom-navbar> -->
    <view class="shoppingBox_header">
      <uniSearchBar class="shoppingBox_header_search" @input="queryCustomer" placeholder="搜索自提点/地址" v-model="query.keyword" radius="50"></uniSearchBar>
    </view>

    <view class="shoppingBox_content">
      <view style="box-shadow: 0 0 5px 3px #dee0e2; border-radius: 10rpx; padding: 10rpx;">
        <uni-collapse accordion class="shoppingBox_content_collapse">
          <uni-collapse-item :title="mapOpen ? '收起地图' : '展开地图'" :open="mapOpen" @change="change">
            <view class="shoppingBox_content_collapse_map">
              <map style="width: 100%; height: 189px; border-radius: 10rpx" :latitude="latitude" :longitude="longitude" :markers="markers" scale="15" :show-location="true"> </map>
              <image class="shoppingBox_content_collapse_map_relocate" src="/static/image/relocate_icon.png" mode="widthFix" @click="relocate" />
            </view>
          </uni-collapse-item>
        </uni-collapse>
      </view>

      <view class="shoppingBox_content_list" id="scroll-panel">
        <scroll-view ref="wareList" @scrolltolower="queryData" :scroll-top="scrollTop" :style="{ height: contentHeight + 'px' }" scroll-y="true" class="scroll-Y">
          <wareItem v-for="(item, index) in lists" :key="index" :item="item" :index="index" @change="changeSelect"></wareItem>
        </scroll-view>
      </view>
    </view>
    <view class="shoppingBox_bottom">
      <button class="shoppingBox_bottom_btn" @tap="submit">确定</button>
    </view>
  </view>
</template>

<script>
import { debounce, getScreen, getUserInfo } from '@/service/auth'

import proxyGoods from '@/utils/proxyGoods.js'
import navbarMixin from '@/mxins/navbar.js'
import { uniSearchBar } from '@/components/uniSearchBar.vue'
import { getBasWarehouseList } from '@/service/api/logistics'
import wareItem from '../components/wareItem'
export default {
  name: 'shopping',
  mixins: [navbarMixin],
  components: { uniSearchBar, wareItem },
  created() {
    const { width, height } = getScreen()
    this.contentHeight = height - (600 * width) / 750

    const app = getApp()

    const data = getUserInfo()
    this.user = JSON.parse(data)
    if (this.user) {
      this.customerId = this.user.customerIds
    }
  },
  onLoad(option) {
    this.getLocation()
  },
  onShow() {
    const app = getApp()
  },
  mounted() {
    this.$nextTick(() => {
      this.initScrollView().then(() => {
        /* 获取列表数据，你的代码从此处开始 */
      })
    })
  },
  watch: {
    lists: {
      handler(newVal) {},
      deep: true, // 深度监听对象内部值的变化
    },
  },
  data() {
    return {
      customerId: null,
      query: {
        page: 1,
        size: 20,
        lng: '',
        lat: '',
        keyword: '',
      },
      end: false,
      lists: [],
      mapOpen: true,
      markers: [
        {
          id: 0,
          latitude: '', //纬度
          longitude: '', //经度
          alpha: 1, //透明度
          width: 15,
          height: 30,
          iconPath: '/static/image/marker_loca.png',
          callout: {
            content: '', //文本
            color: '#333', //文字颜色
            fontSize: 14, //文本大小 //borderRadius:2,//边框圆角
            bgColor: '#fff', //背景颜色
            display: 'ALWAYS', //常显
            textAlign: 'center',
            padding: '5',
            borderRadius: '5',
          },
        },
      ],
      latitude: '',
      longitude: '',
      contentHeight: '',
    }
  },
  methods: {
    initScrollView() {
      return new Promise((resolve, reject) => {
        let view = uni.createSelectorQuery().select('#scroll-panel')
        view
          .boundingClientRect(res => {
            // this.contentHeight = res.top
            console.log('res', res)
            this.contentHeight = res.height
            setTimeout(() => {
              resolve()
            }, 100)
          })
          .exec()
      })
    },
    getLocation() {
      const that = this
      uni.getLocation({
        type: 'gcj02',
        geocode: true,
        isHighAccuracy: true,
        success: function (res) {
          console.log('当前位置的经度：' + res.longitude)
          console.log('当前位置的纬度：' + res.latitude)
          that.query.lng = res.longitude
          that.query.lat = res.latitude
          that.init()
          that.onGet()
        },
      })
    },

    onGet: debounce(function () {
      uni.showLoading({ title: '加载中' })
      const data = {
        customerId: this.customerId,
        ...this.query,
      }
      getBasWarehouseList(data).catch(err => {
        uni.hideLoading()
        console.log('err', err)
        if (err.content.length < this.query.size) this.end = true
        err.content.map(item => {
          item.checked = false
          return item
        })

        this.lists = [...this.lists, ...err.content]
        this.showMarker(this.lists[0])
      })
    }, 300),
    showMarker(item) {
      item.checked = true
      if (item.location) {
        const locationArray = item.location.split(',')
        this.markers[0].latitude = locationArray[1]
        this.markers[0].longitude = locationArray[0]
        this.markers[0].callout.content = item.name
        this.latitude = locationArray[1]
        this.longitude = locationArray[0]
      }
    },
    backs() {
      const ware = this.lists.find(item => item.checked)
      if (ware) {
        const eventChannel = this.getOpenerEventChannel()
        eventChannel.emit('acceptDataFromOpenedPage', ware)
        uni.navigateBack({
          delta: 1,
        })
      }
    },
    init() {
      this.query.page = 1
      this.end = false
      this.lists = []
    },
    queryData() {
      console.log('queryData')
      if (this.end) return
      this.query.page++
      this.onGet()
    },
    search(e) {
      // 查询
      this.query.keyword = e.value
      this.init()
      this.onGet()
    },
    queryCustomer(val) {
      this.query.keyword = val
      this.init()
      this.onGet()
    },
    change(e) {
      console.log('change', e)
    },
    changeSelect(index) {
      this.lists.map(item => {
        const isChecked = item.id === this.lists[index].id
        item.checked = isChecked
        return item
      })
      this.showMarker(this.lists[index])
    },
    relocate() {
      this.getLocation()
    },
    submit() {
      this.backs()
    },
  },
}
</script>

<style lang="scss" scoped>
.shoppingBox {
  background: linear-gradient(to bottom, #2dc05b 0%, #fff 20%);
  height: 100vh;
  display: flex;
  flex-direction: column;
  &_header {
    &_search {
      position: sticky;
      top: 0;
      height: 100rpx;
    }
  }
  &_content {
    margin: 20rpx;
    flex: 1;
    overflow: hidden;
    /* padding-bottom: 150rpx; */

    &_collapse {
      &_map {
        position: sticky;
        top: 0;
        height: auto;

        &_relocate {
          width: 100rpx;
          position: absolute;
          right: 30rpx;
          bottom: 30rpx;
        }
      }
    }
    &_list {
      display: flex;
      position: relative;
      overflow-y: scroll;
      z-index: 1;
      &_left {
        width: 200rpx;
        background: #f5f6fa;
      }
      &_right {
        flex: 1;
      }
    }
  }
  &_bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background-color: white;

    padding: 20rpx 20rpx 50rpx 20rpx;
    box-shadow: 0px -1px 0px 0px rgba(104, 110, 120, 0.1);
    &_btn {
      background: linear-gradient(to left, #ff8f00, #ffb300);
      color: white;
    }
  }
}
</style>
